<template>
    <div class="goodslist-container">
        <!-- 下拉刷新van-pull -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list :offset="300" v-model="loading" :finished="finished" @load="onLoad">
                <Goods v-for="item in goodsList" :key="item.id" :data="item" @click="handle">
                    <template #footer>
                        <div class="area">
                            <div class="price">
                                <span>&yen; 2195</span>
                                <span>&yen; 2499</span>
                            </div>
                            <div class="info">
                                <span>热卖中</span>
                                <span>剩余60件</span>
                            </div>
                        </div>
                    </template>
                </Goods>
                <div class="text">--- 没有啦还看还看 ---</div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import { fetchGoodsList } from "../api/index.js";
import Goods from "../components/Goods.vue";
export default {
    name: "myGoodsList",
    data() {
        return {
            page: 0,
            limit: 8,
            goodsList: [],
            loading: false, // 控制是否在加载中
            finished: false, // 控制是否加载完成
            refreshing: false // 控制是否在刷新中...
        };
    },
    created() { },
    methods: {
        async _fetchGoodsList() {
            //   正在刷新中则把数据清空
            if (this.refreshing) {
                this.goodsList = [];
                this.refreshing = false;
            }
            let { message } = await fetchGoodsList(this.page, this.limit);
            console.log(message)
            this.goodsList = [...this.goodsList, ...message];
            this.loading = false; // 加载完毕

            if (message.length === 0) {
                this.goodsList.length % 2 === 1 && this.goodsList.pop();
                this.finished = true;
            }
        },
        handle(data, event) {
            this.$router.push("/goodDetails/" + data.id);
        },
        onLoad() {
            this.page++;
            // 默认会加载一次
            this._fetchGoodsList();
        },
        onRefresh() {
            // console.log("onRefresh刷新");
            this.page = 0;
            // 清空列表数据
            this.finished = false;
            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.onLoad();
        }
    },
    components: {
        Goods
    }
};
</script>

<style lang="scss" scoped>
.van-list {
    padding: 10px 5px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: #f0eded;

    .info {
        display: flex;
        justify-content: space-between;
        color: #a09f9e;
    }
}

.text {
    padding: 15px;
    margin: 0 auto;
    color: #a09f9e;
}
</style>
